<template>
  <div @click="toggleScreenFull" id="guide-full">
    <svg-icon :icon="isScreenFull?'exit-fullscreen': 'fullscreen'"></svg-icon>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import screenFull from 'screenfull'

const isScreenFull = ref(false)
const toggleScreenFull = () => {
  screenFull.toggle()
}
// 控制图标
const change = () => {
  isScreenFull.value = screenFull.isFullscreen
}
onMounted(() => {
  screenFull.on('change', change)
})
onUnmounted(() => {
  screenFull.off('change', change)
})
</script>

<style scoped>

</style>
